import React, { memo } from 'react'
import { connect } from 'react-redux'
import { decrementAction, incrementAction } from './store/module/counter'

const App = memo(function (props) {
  const { counter } = props

  function incrementHandle() {
    props.increment()
  }

  function decrementHandle() {
    props.decrement()
  }

  return (
    <div>
      <h2>App Page</h2>
      <h3>counter: {counter}</h3>
      <button onClick={incrementHandle}>+1</button>
      <button onClick={decrementHandle}>-1</button>
    </div>
  )
})

const mapStateToProps = (state) => ({
  counter: state.counter.counter,
})

const mapDispatchToProps = (dispatch) => ({
  increment(num) {
    dispatch(incrementAction(num))
  },
  decrement(num) {
    dispatch(decrementAction(num))
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(App)
